<template>
    <u-popup :show="show" mode="center" @close="close" bgColor="transparent" customStyle="margin:0 auto;" :closeOnClickOverlay="true">
        <view class="text-center p-relative popup-box dir-ltr">
            <view>
                <view class="pt-md fs-md">{{ title ? (title == 'false' ? '' : title) : $t('tips') }}</view>
                <slot v-if="customContent" name="content"></slot>
                <view v-else class="pa-lg fs-md" style="color: #606266">{{ content }}</view>
                <view v-if="footerBtn" class="row items-center justify-around" style="border-top: 1rpx solid #6062661e">
                    <view class="pa-md text-gray fs-md width50" @click="close">{{ $t('cancel') }}</view>
                    <view class="pa-md fs-md width50" style="border-left: 1rpx solid #6062661e" @click="confirm" :style="{ color: confirmColor }">{{ $t('confirm') }}</view>
                </view>
            </view>
        </view>
    </u-popup>
</template>
<script>
export default {
    name: 'custom-modal',
    props: {
        show: {
            type: Boolean,
            default: false,
        },
        title: {
            type: String,
            default: '',
        },
        content: {
            type: String,
            default: '',
        },
        confirmColor: {
            type: String,
            default: 'red',
        },
        customContent: {
            type: Boolean,
            default: false,
        },
        footerBtn: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            // 防多次提交
            sendFlag: false,
        }
    },
    watch: {
        show(newValue, oldValue) {},
    },
    mounted() {},
    methods: {
        close(e) {
            this.$emit('close')
        },
        confirm() {
            // 防多次提交
            if (this.sendFlag) return
            this.sendFlag = true
            setTimeout(() => {
                this.sendFlag = false
            }, 1500)

            this.$emit('confirm')
        },
    },
}
</script>
<style scoped lang="scss">
.popup-box {
    background: #fff;
    width: 78vw;
    border-radius: 24px;
    max-width: 780px;
}
</style>